<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bookdetails-1.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/tool/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/booklist-1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/tool/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/tool/layer/layer.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    .shaixuan{
        height: 30px;
        width: 50px;
        border: 1px solid black;
        float: left;
        margin: 16px 0px 0px 20px;
        font-size: 16px;
        background-color: white;
        padding: 2px 8px;
        cursor: pointer;
    }
    .xuan{
        position: absolute;
        height: 150px;
        width: 294px;
        border: 1px solid rgba(94, 94, 94, 0.99);
        top: 83px;
        left: 578px;
        z-index:1;
        background-color: white;
        display: none;
    }
    .xuan1{
        float: left;
        height: 150px;
        width: 100px;

    }
    .xuan11{

        height: 30px;
        width: 100%;
        margin: 14px;
    }
    .xuan2{
        float: left;
        height: 150px;
        width: 160px;

    }
    .magi{
        margin: 10px;
    }
    .bo{
        background-color: #850624;
        width: 90px;
        color: white;
        font-size: 17px;
    }
</style>

            <!-- 公共头部 -->
            <header class="clear">
                <img src="${pageContext.request.contextPath}/static/img/book.png">
                <div class="logo">
                    <h1>星月小说网</h1>
                    <div class="clear"></div>
                    <p>想看既看的阅读</p>
                </div>
                <div class="search left">
                    <form action="" method="post">
                        <input type="text" id="keyword" name="keyword" value="" placeholder="请输入书名或作者名称">
                        <input type="button" id="searchBtn" class="bo" value="搜索">
                    </form>
                    <p class="left">
                        <span>热门推荐：</span>
                        <c:forEach items="${sessionScope.lb}" var="lb">
                            <a href="${pageContext.request.contextPath}/guest/book/${lb.novelId}/1">${lb.novelName}</a>
                        </c:forEach>
                    </p>
                </div>
                <div class="shaixuan">筛选</div>
                <div class="reg">
                    <div class="delu2 clear">
                        <c:if test="${sessionScope.username != null}">
                            <div class="self ease">
                                <a href="javascript:;" class="clear">&ensp;&ensp;${sessionScope.username}<span class="icon ease"></span></a>
                                <div class="clear"></div>
                                <ul class="clear" style="height: 10px;">
                                    <li><a href="${pageContext.request.contextPath}/logout">退出登录</a></li>
                                </ul>
                            </div>
                            <span class="split">|</span>
                            <shiro:hasRole name="admin">
                                <a href="${pageContext.request.contextPath}/admin/Main" class="news">后台管理</a>
                            </shiro:hasRole>
                            <shiro:hasRole name="author">
                                <a href="${pageContext.request.contextPath}/author/Main" title="您有${sessionScope.messageCount == 0?' ':sessionScope.messageCount}条未读消息" class="news">消息<b>${sessionScope.messageCount}</b></a>
                            </shiro:hasRole>
                            <shiro:hasRole name="user">
                                <a href="${pageContext.request.contextPath}/user/Main" title="您有${sessionScope.messageCount == 0?' ':sessionScope.messageCount}条未读消息" class="news">消息<b>${sessionScope.messageCount}</b></a>
                            </shiro:hasRole>
                            <span class="split">|</span>
                            <shiro:hasRole name="author">
                                <a href="${pageContext.request.contextPath}/author/Main">我的主页</a>
                            </shiro:hasRole>
                            <shiro:hasRole name="user">
                                <a href="${pageContext.request.contextPath}/user/Main">我的主页</a>
                            </shiro:hasRole>
                    </div>
                    </c:if>
                    <c:if test="${sessionScope.username == null}">
                        <a href="${pageContext.request.contextPath}/guest/login">登录</a>
                        <span class="split">|</span>
                        <a href="${pageContext.request.contextPath}/guest/register">注册</a>
                    </c:if>
                </div>
            </header>
            <!--头部结束-->
<div class="xuan">
    <div class="xuan1">
        <div class="xuan11">
        类型：
        </div>
        <div class="xuan11">
            字数：
        </div>
        <div class="xuan11">
            更新状态：
        </div>
    </div>
    <div class="xuan2">
        <form role="form" action="" method="post">
            <div class="form-group" >

                <select id="type" class="form-control magi" name="type">
                    <option value="">不限</option>
                    <option value="xh">玄幻</option>
                    <option value="kh">科幻</option>
                    <option value="wx">武侠</option>
                    <option value="xx">仙侠</option>
                    <option value="qh">奇幻</option>
                </select>
                <select id="word" class="form-control magi" name="word">
                    <option value="">不限</option>
                    <option value="300000">30万字以下</option>
                    <option value="400000">30-50万字</option>
                    <option value="500000">50-100万字</option>
                    <option value="1000000">100万字以上</option>
                </select>
                <select id="status" class="form-control magi" name="status">
                    <option value="">不限</option>
                    <option value="0">连载</option>
                    <option value="1">完结</option>
                </select>

            </div>
        </form>

    </div>
</div>

            <nav class="clear">
                <ul class="nav_1 clear">
                    <div class="active"></div>
                    <li class="sy"><a href="${pageContext.request.contextPath}/guest/main">首页</a></li>

                    <li class="xh"><a href="${pageContext.request.contextPath}/guest/type/list/xh/1">玄幻</a></li>

                    <li class="kh"><a href="${pageContext.request.contextPath}/guest/type/list/kh/1">科幻</a></li>
                    <li class="qh"><a href="${pageContext.request.contextPath}/guest/type/list/qh/1">奇幻</a></li>

                    <li class="wx"><a href="${pageContext.request.contextPath}/guest/type/list/wx/1">武侠</a></li>

                    <li class="xx"><a href="${pageContext.request.contextPath}/guest/type/list/xx/1">仙侠</a></li>
                    <li class="ranking"><a href="${pageContext.request.contextPath}/guest/ranking">排行榜</a></li>
<%--                    <div class="submission">--%>
<%--                        <a href="javascript:;"><span class="icon_span"></span>我要投稿</a>--%>
<%--                    </div>--%>
                </ul>
            </nav>
            <script>
                $("#searchBtn").click(function () {
                    var keyword = $("#keyword").val();
                    var ty = $("#type").val();
                    var word = $("#word").val();
                    var status = $("#status").val();
                    window.location.href="${pageContext.request.contextPath}/guest/type/list/search/1?keyword="+keyword+"&ty="+ty+"&word="+word+"&status="+status;
                });
                <c:if test = "${type.type == 'kh'}" >
                    $(".kh").addClass("this");
                </c:if>
                <c:if test = "${type.type == 'qh'}" >
                    $(".qh").addClass("this");
                    </c:if>
                <c:if test = "${type.type == 'sy'}" >
                    $(".sy").addClass("this");
                    </c:if>
                <c:if test = "${type.type == 'xh'}" >
                    $(".xh").addClass("this");
                    </c:if>
                <c:if test = "${type.type == 'wx'}" >
                    $(".wx").addClass("this");
                    </c:if>
                <c:if test = "${type.type == 'xx'}" >
                    $(".xx").addClass("this");
                    </c:if>
                <c:if test = "${type.type == 'ranking'}" >
                    $(".ranking").addClass("this");
                    </c:if>
            </script>
<script>
    var shaixuan=document.querySelector(".shaixuan");
    var xuan=document.querySelector(".xuan");
    var n=0;

    shaixuan.addEventListener("click",function () {
        if(n==0){
            xuan.style.display="block";
            n++;

        }else {
            n--;
            xuan.style.display="none";
        }
    })
    shaixuan.addEventListener("mouseover",function () {
        this.style.backgroundColor="whitesmoke";
    })
    shaixuan.addEventListener("mouseout",function () {
        this.style.backgroundColor="white";
    })
</script>